<template>
	<div>
		<!-- 缓存组件状态：
    把当前组件内的操作状态保存下来。
    无论该组件是否被销毁，只要打开该组件，
    状态是保持的。 -->

		<!-- keep-alive -->
		<button @click="showDom = 'A1'">A1</button>
		<button @click="showDom = 'A2'">A2</button>
		<keep-alive exclude="A2">
			<A1 v-if="showDom === 'A1'"></A1>
			<A2 v-else></A2>
		</keep-alive>
	</div>
</template>

<script>
import A1 from './A1'
import A2 from './A2'
export default {
	data() {
		return {
			showDom: 'A1',
		}
	},
	components: { A1, A2 },
}
</script>
